{extend name="common:base" /}
{block name="page_current"}
<div class="fui-page-group statusbar">
    <style>
        .fui-header .title {
            background: #fff;
        }
    </style>
    <style>
        .order_detail .fui-list-inner .title.has-address {
            font-size: .7rem;
            line-height: 1.2rem;
            height: 1.2rem;
            display: block;
        }
        .order_detail .fui-list-inner .text{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .order_detail .fui-list:before{
            border: 0;
        }
        .order_detail .fui-list_title{
            position: relative;
            display: flex;
            align-items: center;
            line-height: normal;
        }
        .order_detail  .lineblock {
            position: relative;
            overflow: hidden;
        }
        .order_detail  .lineblock:before {
            content: "";
            position: absolute;
            left: .5rem;
            top: 0;
            right: .5rem;
            height: 1px;
            border-top: 1px solid #ebebeb;
            -webkit-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
        .refuse_reason{
            padding: 0.5rem;
            background: #fdfce5;
            /*background: #fff;*/
            color: #999;
            font-size: 0.7rem;
            line-height: 1rem
        }
    </style>
    <link rel="stylesheet" type="text/css" href="__STATIC__/m/css/orderdetail.css">
    <div class="fui-page cav order_detail fui-page-current">
        <div class="fui-header">
            <!--判断进入订单详情 返回键隐藏，通过模板消息进入时隐藏-->
            <div class="fui-header-left">
                <a class="back" id="btn-back"></a>
            </div>
            <div class="title">
                订单详情
            </div>
            <div class="fui-header-right"></div>
        </div>
        <div class="fui-content navbar ">
            <!--状态-->
            <div class="order_detail_header">
                <div class="order_detail_ststus">
                    <div style="font-size: 0.85rem;">
                        {switch orderModel['status']}
                        {case 1}
                        待付款
                        {/case}
                        {case 2}
                        待发货
                        {/case}
                        {case 3}
                        待收货
                        {/case}
                        {case 4}
                        已完成
                        {/case}
                        {default /}
                        {/switch}
                    </div>
                    <div>
                        订单金额：¥ {$orderModel['total_price']}
                    </div>
                </div>
            </div>
            <div class="fui-list-group noborder" style="display: block;">
                {if $orderModel['status'] >= 3}
                <a class="fui-list" style="background: #fff;" href="{:url('express')}?id={$orderModel['id']}">
                    <div class="fui-list-icon">
                        <i class="icon icon-daifahuo1" style="color: #ff5555;"></i>
                    </div>
                    <div class="fui-list-inner" style="font-size: 0.7rem;height: auto;line-height: 1.2rem;">
                        <p style="color:#ff5555">快递公司:{$orderModel['oe_express_com']}</p>
                        <p style="color:#999">快递单号:{$orderModel['oe_express_sn']}</p>
                    </div>
                    <div class="fui-list-angle"><span class="angle"></span></div>
                </a>
                {/if}
                <div class="fui-list" style="background:#fff;padding-top:.8rem;padding-bottom:.83rem;">
                    <div class="fui-list-icon">
                        <i class="icon icon-dingwei"></i>
                    </div>
                    <div class="fui-list-inner" style="font-size: 0.7rem;height: auto;">
                        <div class="title has-address">{$orderModel['address']['realname']} {$orderModel['address']['mobile']}</div>
                        <div class="text"><span class="address">{$orderModel['address']['province']}{$orderModel['address']['city']}{$orderModel['address']['area']} {$orderModel['address']['address']}</span></div>
                    </div>
                </div>
            </div>
            <!--商品信息-->
            <div class="fui-list-group">
                <div class="fui-list_title"><i class="icon icon-shop" style="margin-right: 0.25rem;"></i>商城</div>
                {volist name="orderModel['subs']" id="sub"}
                <a class="fui-list" href="{:url('m/Goods/detail')}?id={$sub['goods_id']}">
                    <div class="fui-list-media">
                        <img src="{$sub['goods_thumbs']}">
                    </div>
                    <div class="fui-list-inner">
                        <div class="title">{$sub['goods_name']}</div>
                        {if($defaultSpecs != $sub['goods_option_specs'])}
                        <div class="subtitle">{$sub['goods_option_title']}</div>
                        {/if}
                    </div>
                    <div class="fui-list-angle" style="margin-right: 0">
                        <div style="color: #000">￥{$sub['market_price']}</div>
                        <div class="num">x{$sub['total']}</div>
                    </div>
                </a>
                {/volist}
            </div>
            <!--门店-->
            <!--消费码-->
            <!--商品小计-->
            <div class="fui-cell-group noborder">
                <div class="fui-cell">
                    <div class="fui-cell-label">商品小计</div>
                    <div class="fui-cell-info">
                    </div>
                    <div class="fui-cell-remark noremark">
                        ¥ {$orderModel['total_price']}
                    </div>
                </div>
                <div class="fui-cell">
                    <div class="fui-cell-label">运费</div>
                    <div class="fui-cell-info">
                    </div>
                    <div class="fui-cell-remark noremark">
                        ¥ {$orderModel['dispatch_price']}
                    </div>
                </div>
                <div class="fui-cell">
                    <div class="fui-cell-label" style="width: 6rem;">实付费(含运费)</div>
                    <div class="fui-cell-info">
                    </div>
                    <div class="fui-cell-remark noremark text-danger">
						 <span style="font-size:.75rem">
                             ¥{:getOrderPayableByModel($orderModel)}
                         </span>
                    </div>
                </div>
            </div>
            <div class="fui-cell-group noborder order-info">
                <div class="fui-cell">
                    <div class="fui-cell-info">
                        <span style="margin-right: 0.7rem;">订单编号</span>{$orderModel['order_no']}
                    </div>
                    <div class="fui-cell-remark noremark">
                    </div>
                </div>
                <div class="fui-cell">
                    <div class="fui-cell-info">
                        <span style="margin-right:0.7rem;">创建时间</span>{:date('Y-m-d H:i:s', $orderModel['create_time'])}
                    </div>
                    <div class="fui-cell-remark noremark">
                    </div>
                </div>
                {if $orderModel['status']>=2 && !empty($orderModel['pay_log'])}
                <div class="fui-cell">
                    <div class="fui-cell-info">
                        <span style="margin-right: 0.7rem;">支付时间</span>{:date('Y-m-d H:i:s',$orderModel['pay_log'][0]['create_time'])}
                    </div>
                    <div class="fui-cell-remark noremark">
                    </div>
                </div>
                {/if}
                {if $orderModel['status']>=3 }
                <div class="fui-cell">
                    <div class="fui-cell-info">
                        <span style="margin-right: 0.7rem;">发货时间</span>{:date('Y-m-d H:i:s',$orderModel['oe_update_time'])}
                    </div>
                    <div class="fui-cell-remark noremark">
                    </div>
                </div>
                {/if}
                {if $orderModel['status']>=4 }
                <div class="fui-cell">
                    <div class="fui-cell-info">
                        <span style="margin-right: 0.7rem;">完成时间</span>{:date('Y-m-d H:i:s',$orderModel['update_time'])}
                    </div>
                    <div class="fui-cell-remark noremark">
                    </div>
                </div>
                {/if}
            </div>
        </div>
        <div class="fui-footer" style="text-align: right;">
            {if 4 == $orderModel['status']}
            <div class="btn btn-sm btn-default-o order-delete" onclick="delOrder({$orderModel['id']});">删除订单</div>
            {/if}
            {if 1 == $orderModel['status']}
            <div class="btn btn-sm btn-default-o order-cancel">取消订单
                <select data-orderid="8" onchange="orderCancel(this)">
                    <option value="">不取消了</option>
                    <option value="我不想买了">我不想买了</option>
                    <option value="信息填写错误，重新拍">信息填写错误，重新拍</option>
                    <option value="同城见面交易">同城见面交易</option>
                    <option value="其他原因">其他原因</option>
                </select>
            </div>
            {/if}
            {if 1 == $orderModel['status']}
            <a class="btn btn-sm btn-default-o" href="{:url('pay')}?id={$orderModel['id']}" external>支付订单</a>
            {/if}
            {if 3 == $orderModel['status']}
            <a class="btn btn-sm btn-default-o" href="javascript:finishOrder({$orderModel['id']});" data-nocache="true">确认收货</a>
            {/if}
        </div>
    </div>
    <script>
        function delOrder(_orderId) {
            console.log('delOrder ' + _orderId)
            FoxUI.confirm('确认要删除该订单吗?',function () {
                core.json("{:url('del_order')}",{id:_orderId},function (json) {
                    FoxUI.toast.show(json.msg)
                    if(json.code){
                        location.reload();
                    }
                },true,false);
            });
        }
        function finishOrder(_orderId) {
            console.log('finishOrder ' + _orderId)

            FoxUI.confirm('确认已收到货了吗?',function () {
                core.json("{:url('finish_order')}",{id:_orderId},function (json) {
                    FoxUI.toast.show(json.msg)
                    if(json.code){
                        location.reload();
                    }
                },true,false);
            });
        }
        function orderCancel(_obj) {
            var val = $(_obj).val();
            var orderId = $(_obj).data('orderid');
            if(val){
                FoxUI.confirm('确认要取消该订单吗?',function () {
                    core.json("{:url('cancel_order')}",{id:orderId,remark:val},function (json) {
                        FoxUI.toast.show(json.msg)
                        if(json.code){
                            location.reload();
                        }
                    },true,false);
                });
            }
        }
    </script>
</div>
{/block}
{block name="script"}
{/block}